<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>Payment Processing...</title>
		<style>
			.spinner {
				height: 100%;
				width: 100%;
				position: fixed;
				top: 0;
				left: 0;
				z-index: 10;
			}

			.spinner .spinWrap {
				width: 200px;
				height: 100px;
				position: fixed;
				top: 42%;
				left: 50%;
				margin-left: -100px;
				margin-top: -50px;
			}

			.spinner .spinnerImage {
				margin: 28px 0 0 -25px;
			}

			.spinner .loader,
			.spinner .spinnerImage {
				height: 100px;
				width: 100px;
				position: absolute;
				top: 0;
				left: 50%;
				opacity: 1;
				filter: alpha(opacity=100);
			}

			.spinner .loader {
				margin: 0 0 0 -55px;
				background-color: transparent;
				-webkit-animation: rotation 0.7s linear infinite;
				-moz-animation: rotation 0.7s infinite linear;
				-o-animation: rotation 0.7s infinite linear;
				animation: rotation 0.7s linear infinite;
				border: 5px solid #cbcbca;
				border-top-color: #2380be;
				border-radius: 100%;
			}

			.spinner .loadingMessage {
				-webkit-box-sizing: border-box;
				-moz-box-sizing: border-box;
				-ms-box-sizing: border-box;
				box-sizing: border-box;
				width: 100%;
				margin-top: 125px;
				text-align: center;
				z-index: 100;
				outline: none;
			}

			@-webkit-keyframes rotation {
				0% {
					-webkit-transform: rotate(0deg);
				}

				to {
					-webkit-transform: rotate(359deg);
				}
			}

			@-moz-keyframes rotation {
				0% {
					-moz-transform: rotate(0deg);
				}

				to {
					-moz-transform: rotate(359deg);
				}
			}

			@-o-keyframes rotation {
				0% {
					-o-transform: rotate(0deg);
				}

				to {
					-o-transform: rotate(359deg);
				}
			}

			@keyframes rotation {
				0% {
					transform: rotate(0deg);
				}

				to {
					transform: rotate(359deg);
				}
			}

			@media only screen and (max-width: 768px) {
				.spinner .spinWrap {
					width: 200px;
					height: 100px;
					position: fixed;
					top: 40%;
					left: 50%;
					margin-left: -93px;
					margin-top: -50px;
				}
			}
		</style>

	</head>

	<body>

		<div class="spinner" id="preloader">
			<div class="spinWrap">
				<p class="spinnerImage">
					<img
						 src="">
				</p>
				<p class="loader"></p>
				<p class="loadingMessage">Processing...</p>
				<p class="loadingSubHeading"></p>
			</div>
		</div>

	</body>

</html>